<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成交员业绩</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .performance-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .chart-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 1rem;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-4 py-2 bg-black text-white text-sm">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-4 py-6">
        <!-- 头部 -->
        <div class="flex items-center justify-between mb-6">
            <button class="text-white" onclick="history.back()">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-xl font-bold text-white">成交员业绩</h1>
            <button class="text-white">
                <i class="fas fa-calendar-alt text-xl"></i>
            </button>
        </div>

        <!-- 时间筛选 -->
        <div class="flex space-x-2 mb-6">
            <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterPeriod('today')">今日</button>
            <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterPeriod('week')">本周</button>
            <button class="px-4 py-2 bg-white text-purple-600 rounded-full text-sm font-medium" onclick="filterPeriod('month')">本月</button>
            <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterPeriod('year')">本年</button>
        </div>

        <!-- 核心指标 -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="performance-card rounded-2xl p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-white text-opacity-80 text-sm">总成交额</span>
                    <i class="fas fa-chart-line text-white text-opacity-60"></i>
                </div>
                <div class="text-2xl font-bold text-white mb-1">¥128,560</div>
                <div class="flex items-center text-green-300 text-sm">
                    <i class="fas fa-arrow-up mr-1"></i>
                    <span>+15.2%</span>
                </div>
            </div>
            
            <div class="performance-card rounded-2xl p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-white text-opacity-80 text-sm">成交订单</span>
                    <i class="fas fa-shopping-cart text-white text-opacity-60"></i>
                </div>
                <div class="text-2xl font-bold text-white mb-1">156</div>
                <div class="flex items-center text-green-300 text-sm">
                    <i class="fas fa-arrow-up mr-1"></i>
                    <span>+8.5%</span>
                </div>
            </div>
            
            <div class="performance-card rounded-2xl p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-white text-opacity-80 text-sm">客户数量</span>
                    <i class="fas fa-users text-white text-opacity-60"></i>
                </div>
                <div class="text-2xl font-bold text-white mb-1">89</div>
                <div class="flex items-center text-green-300 text-sm">
                    <i class="fas fa-arrow-up mr-1"></i>
                    <span>+12.3%</span>
                </div>
            </div>
            
            <div class="performance-card rounded-2xl p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-white text-opacity-80 text-sm">转化率</span>
                    <i class="fas fa-percentage text-white text-opacity-60"></i>
                </div>
                <div class="text-2xl font-bold text-white mb-1">68.5%</div>
                <div class="flex items-center text-green-300 text-sm">
                    <i class="fas fa-arrow-up mr-1"></i>
                    <span>+3.2%</span>
                </div>
            </div>
        </div>

        <!-- 业绩趋势图 -->
        <div class="chart-container p-4 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">业绩趋势</h3>
            <div class="h-40 bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg flex items-end justify-around p-4">
                <div class="bg-blue-500 rounded-t" style="height: 60%; width: 20px;"></div>
                <div class="bg-blue-500 rounded-t" style="height: 80%; width: 20px;"></div>
                <div class="bg-blue-500 rounded-t" style="height: 45%; width: 20px;"></div>
                <div class="bg-blue-500 rounded-t" style="height: 90%; width: 20px;"></div>
                <div class="bg-blue-500 rounded-t" style="height: 75%; width: 20px;"></div>
                <div class="bg-blue-500 rounded-t" style="height: 95%; width: 20px;"></div>
                <div class="bg-blue-500 rounded-t" style="height: 85%; width: 20px;"></div>
            </div>
            <div class="flex justify-around text-xs text-gray-500 mt-2">
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
            </div>
        </div>

        <!-- 产品销售排行 -->
        <div class="glass-card rounded-2xl p-4 mb-6">
            <h3 class="text-lg font-semibold text-white mb-4">热销产品排行</h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">1</div>
                        <div>
                            <div class="text-white font-medium">九寨沟黄龙三日游</div>
                            <div class="text-white text-opacity-70 text-sm">成交 28 单</div>
                        </div>
                    </div>
                    <div class="text-white font-bold">¥44,800</div>
                </div>
                
                <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">2</div>
                        <div>
                            <div class="text-white font-medium">拉萨布达拉宫一日游</div>
                            <div class="text-white text-opacity-70 text-sm">成交 22 单</div>
                        </div>
                    </div>
                    <div class="text-white font-bold">¥8,780</div>
                </div>
                
                <div class="flex items-center justify-between bg-white bg-opacity-10 rounded-lg p-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">3</div>
                        <div>
                            <div class="text-white font-medium">新疆天山天池一日游</div>
                            <div class="text-white text-opacity-70 text-sm">成交 18 单</div>
                        </div>
                    </div>
                    <div class="text-white font-bold">¥5,382</div>
                </div>
            </div>
        </div>

        <!-- 客户来源分析 -->
        <div class="glass-card rounded-2xl p-4 mb-6">
            <h3 class="text-lg font-semibold text-white mb-4">客户来源分析</h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
                        <span class="text-white">直接推广</span>
                    </div>
                    <div class="text-white">
                        <span class="font-bold">45%</span>
                        <span class="text-sm text-white text-opacity-70 ml-2">(40人)</span>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                        <span class="text-white">朋友推荐</span>
                    </div>
                    <div class="text-white">
                        <span class="font-bold">32%</span>
                        <span class="text-sm text-white text-opacity-70 ml-2">(28人)</span>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-purple-500 rounded-full mr-3"></div>
                        <span class="text-white">社交媒体</span>
                    </div>
                    <div class="text-white">
                        <span class="font-bold">23%</span>
                        <span class="text-sm text-white text-opacity-70 ml-2">(21人)</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="grid grid-cols-2 gap-4">
            <button class="bg-white bg-opacity-20 text-white py-3 rounded-xl font-medium" onclick="exportReport()">
                <i class="fas fa-download mr-2"></i>
                导出报告
            </button>
            <button class="bg-white text-purple-600 py-3 rounded-xl font-medium" onclick="viewDetails()">
                <i class="fas fa-chart-bar mr-2"></i>
                详细分析
            </button>
        </div>
    </div>

    <script>
        /**
         * 筛选时间周期
         * @param {string} period - 时间周期
         */
        function filterPeriod(period) {
            // 移除所有按钮的激活状态
            document.querySelectorAll('button').forEach(btn => {
                btn.classList.remove('bg-white', 'text-purple-600');
                btn.classList.add('bg-white', 'bg-opacity-20', 'text-white');
            });
            
            // 激活当前按钮
            event.target.classList.remove('bg-white', 'bg-opacity-20', 'text-white');
            event.target.classList.add('bg-white', 'text-purple-600');
            
            console.log(`筛选时间周期: ${period}`);
            // 这里可以添加数据更新逻辑
            updatePerformanceData(period);
        }
        
        /**
         * 更新业绩数据
         * @param {string} period - 时间周期
         */
        function updatePerformanceData(period) {
            // 模拟数据更新
            const data = {
                today: { sales: '¥12,560', orders: 15, customers: 8, rate: '72.5%' },
                week: { sales: '¥45,280', orders: 52, customers: 28, rate: '69.8%' },
                month: { sales: '¥128,560', orders: 156, customers: 89, rate: '68.5%' },
                year: { sales: '¥1,285,600', orders: 1560, customers: 890, rate: '71.2%' }
            };
            
            const currentData = data[period];
            if (currentData) {
                // 更新显示的数据
                document.querySelector('.performance-card:nth-child(1) .text-2xl').textContent = currentData.sales;
                document.querySelector('.performance-card:nth-child(2) .text-2xl').textContent = currentData.orders;
                document.querySelector('.performance-card:nth-child(3) .text-2xl').textContent = currentData.customers;
                document.querySelector('.performance-card:nth-child(4) .text-2xl').textContent = currentData.rate;
            }
        }
        
        /**
         * 导出报告
         */
        function exportReport() {
            alert('正在生成业绩报告...');
            // 实际项目中这里会调用导出API
        }
        
        /**
         * 查看详细分析
         */
        function viewDetails() {
            alert('跳转到详细分析页面...');
            // 实际项目中这里会跳转到详细分析页面
        }
        
        /**
         * 页面加载完成后的初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            console.log('成交员业绩页面加载完成');
            // 可以在这里添加其他初始化逻辑
        });
    </script>
</body>
</html>